@deep: ~'>>>';

.content-wrap {

  .content-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .content-left,
  .content-right {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .content-left {
    left: 0;
    display: flex;
    flex-direction: column;
    width: 25%;
    padding-left: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .top-box,
    .bottom-box {
      flex: 1;
      overflow: hidden;
    }
  }

  .content-right {
    right: 0;
    left: 25%;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .top-box {
      flex: 1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    }

    .bottom-box {
      height: 46%;
      display: flex;
      flex-direction: column;
    }

    .top-box-left {
      display: flex;
      flex-direction: column;
      margin-right: 10px;
      width: 60%;
    }

    .top-box-right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }

  .top-box {
    margin-bottom: 10px;
  }

  .chart-box {
    width: 100%;
    height: 100%;
  }

  .table-box {
    flex: 1;
    &>div {
      height: 100%;
    }
    @{deep} .search-bar {
      display: none;
    }

    @{deep} .table-area {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      
      .ivu-table-wrapper {
        flex: 1;
      }
    }
  }
}